<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .parent{
            width:500px;
            height:500px;
            background-color: darkred;
            margin:100px;
            /*子绝父相*/
            position: relative;
        }
        .child{
            position: absolute;
            /*left/top 坐标的百分数是相对于父元素的大小*/

            /*水平居中*/
            left:50%;
            /*往左走自身的长度的一半*/
            margin-left: -75px;

            /*垂直居中*/
            /*往上走自身长度的一半*/
            top:50%;
            margin-top:-75px;

            width: 150px;
            height:150px;
            background-color: #03c8d4;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>

</body>
</html>